import React, { useState, useEffect,useCallback } from "react";


//父子通信
const Childrend = ({list,handleClick,handleClick3}) => {
// console.log('list',list);
  const [getlist, setGetlist] = useState([])
  const [getStr,setGetStr]=useState('')
  const handleClick2 = (str) => {
    setGetStr(getStr=>getStr+str)
    // handleClick(getStr)
  }
   useEffect(() => {
    handleClick(getStr);
  }, [getStr]);
  useEffect(() => {
    setGetlist(list)
  },[list])
  return (
    <div>
      <h1 onClick={()=>handleClick3('我是朱元璋')}>添加朱元璋</h1>
      <p onClick={()=>handleClick2('我是刘玄德')}>添加刘玄德</p>
      <ul>
        {getlist.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}
const LabelPage = () => {
  const [list, setList] = useState([{ name: '111', id: '222' }])
  const [obj, setObj] = useState({
    name: '',
    heroname:''
  })
const getClick = useCallback((str) => {
        setObj({
            name: str,
            heroname: obj.heroname
        });
    }, [obj.heroname]);
  const clicks = (str) => {
    let arr=[{ name: str, id:  list[0].id}]
    setList(
     arr
    )
  }
  const getClick3 = (str) => {
        setObj({
      name: obj.name,
      heroname: str
    })
  }
  return (
    <div
      className="my-tag-bac"
      style={{ minHeight: "660px",paddingTop:"10px" }}
    >
      <Childrend list={list} handleClick={getClick} handleClick3={getClick3 } />
       <span onClick={()=>clicks(list[0].id)}>{list[0].id}点击</span>  
      <p>Name: {obj.name}</p>
      <p>HeroName: {obj.heroname}</p>
    </div>
  );
};

export default LabelPage;
